CSS Grid

グリッドレイアウトを比較的簡単に作れる

Flexboxは1次元のレイアウトシステム

CSS Gridは2次元のレイアウトシステム

CSS Gridの中でflexboxを使うことができる

CSS Grid: illustrated introduction - DEV Community 👩‍💻👨‍💻

They are two different tools for different purposes. Actually, they work very well together, we can have a flex display inside a grid display and vice versa.

There are a lot of differences, but the main one is that flex-box is a one-dimensional layout system whereas CSS grid is a two-dimensional layout system.

元記事は図説がある

Flexboxで同じことをやろうとするとdivがネストすることになりHTMLが複雑になる

https://fukabori.fm/episode/72#12:00

ただし簡単なことであればFlexboxを使う

CSS Gridを使ったレスポンシブ対応の基本レイアウト | Webクリエイターボックス

styled-component + CSS Grid - Speaker Deck

How to make your HTML responsive by adding a single line of CSS - DEV Community 👩‍💻👨‍💻

学習リソース

CSS Grid — Learn all about CSS Grid with Wes Bos in this free video series!

Mozillaの支援によってつくられたらしい

#CSS